<template>
    <div class="app-header">
        <div class="wf-search" id="search">
            <header>
                <div class="jd-logo">
                    <a href="#"><i class="sprite-icon"></i></a>
                </div>
                <div class="search">
                    <form>	
                        <span class="sprite-icon"></span>
                        <input type="search" placeholder="家用电器，每满199减100！">
                    </form>
                </div>
                <div class="login">
                    <a href="Receipt_address.html" id="loginmain">
                        北京
                        <font class="login_icon">
                            <img src="../assets/images/login_icon.png" />
                        </font>
                    </a>
                </div>
            </header>
        </div>
    </div>
</template>
<style>
.wf-search{
	position:fixed;
	left:0;
	top:0;
	right:0;
	margin:auto;
	width:100%;
	max-width:640px;
	min-width:300px;
	height:40px;
	z-index:9999;
	-webkit-transition: .1s background;
	transition: .1s background;
	overflow: hidden;
	padding-right: 1%;
}
.wf-search header{
	position:relative;
	width:100%;
	height:100%;
}
.wf-search header .jd-logo{
	position:absolute;
	left:10px;
	top:3px;
	width: 30px;
	height: 35px;

}
.wf-search header .jd-logo i{
	width: 30px;
	height: 35px;
	background-position: -2px -106px;
}
.wf-search header .search{
	width:100%;
	height:100%;
	padding-left:48px;
	padding-right:48px;
}
.wf-search header .search form{
	display: inline-block;
	width: 100%;
	height: 33px;
	border-radius:15px;
	margin-top: 3px;
	overflow: hidden;
	border: 1px solid #ededed;
	background: #fff;
}
.wf-search header .search form input{
	width: 85%;
	height: 100%;
	display: inline-block;
	background: #fff;
}
.wf-search header .search form span{
	width: 20px;
	height: 20px;
	display: inline-block;
	background-position:-60px -109px;
	margin-left:8px;
	vertical-align:middle;
}
.wf-search header div.login{
	position: absolute;
	right: 10px;
	top:0px;
	width: 28px;
	height: 40px;
	line-height: 42px;
}
.wf-search header div.login a{
	width: 24px;
	height: 40px;
	color: #989898;
	transition: .4s color;
}
.wf-search header div.login a p.login_box{
	position: absolute;
    top: 30px;
    right: 5px;
	width: 24px;
	line-height: 1rem;
	display: none;
	background: rgba(255,255,255,0.8);
	border-radius: 5px 0px 5px px;
}
.wf-search header div.login a font{
	width: 8px;
	height: 8px;
	position: absolute;
	top: 19px;
	right: -6px;
	transform: rotate(0deg);
}
.wf-search header div.login a p.login_box{
	position: absolute;
    top: 30px;
    right: 5px;
	width: 24px;
	line-height: 1rem;
	display: none;
	background: rgba(255,255,255,0.8);
	border-radius: 5px 0px 5px px;
}
</style>
